<script>

import * as echarts from 'echarts';

export default {
  name: 'VisFive',
  data() {
    return{

    }
  },
  mounted() {
    this.getData();
  },
  methods:{open1(msg) {
      this.$notify({
        title: msg,
        message: '这是一条成功的提示消息',
        type: 'success'
      });
    },
    open2(msg) {
      this.$notify({
        title: msg,
        message: '这是一条警告的提示消息',
        type: 'warning'
      });
    },
    open4(msg) {
      this.$notify.error({
        title: msg,
        message: '这是一条错误的提示消息'
      });
    },
    getData(){
      this.$axios.get('/api/data15', {

      }).then(res =>{

        if (res.data.code === 200) {
          let data = [];
          let list_two = [];
          let data1 = []
          for (let i = 0; i < res.data.result.length; i++) {
            data.push(
                res.data.result[i].displayName
            )
            data1.push(
                res.data.result[i].avg
            )
          }
          // 添加数据
          list_two.push(data1)
          this.$axios.get('/api/data16', {

          }).then(res =>{
            let data2 = []
            if (res.data.code === 200) {
              for (let i = 0; i < res.data.result.length; i++) {
                data2.push(
                    res.data.result[i].avg
                )
              }
              // 添加数据
              list_two.push(data2)
              this.$axios.get('/api/data17', {

              }).then(res =>{
                let data3 = []
                if (res.data.code === 200) {
                  for (let i = 0; i < res.data.result.length; i++) {
                    data3.push(
                        res.data.result[i].avg
                    )
                  }
                  // 添加数据
                  list_two.push(data3)
                  this.$axios.get('/api/data18', {

                  }).then(res =>{
                    let data4 = []
                    if (res.data.code === 200) {
                      for (let i = 0; i < res.data.result.length; i++) {
                        data4.push(
                            res.data.result[i].avg
                        )
                      }
                      // 添加数据
                      list_two.push(data4)
                      this.$axios.get('/api/data19', {

                      }).then(res =>{
                        let data5 = []
                        if (res.data.code === 200) {
                          for (let i = 0; i < res.data.result.length; i++) {
                            data5.push(
                                res.data.result[i].avg
                            )
                          }
                          // 添加数据
                          list_two.push(data5)
                          this.$axios.get('/api/data20', {

                          }).then(res =>{
                            let data6 = []
                            if (res.data.code === 200) {
                              for (let i = 0; i < res.data.result.length; i++) {
                                data6.push(
                                    res.data.result[i].avg
                                )
                              }
                              // 添加数据
                              list_two.push(data6)
                              this.$axios.get('/api/data21', {

                              }).then(res =>{
                                let data7 = []
                                if (res.data.code === 200) {
                                  for (let i = 0; i < res.data.result.length; i++) {
                                    data7.push(
                                        res.data.result[i].avg
                                    )
                                  }
                                  // 添加数据
                                  list_two.push(data7)
                                  this.$axios.get('/api/data22', {

                                  }).then(res =>{
                                    let data8 = []
                                    if (res.data.code === 200) {
                                      for (let i = 0; i < res.data.result.length; i++) {
                                        data8.push(
                                            res.data.result[i].avg
                                        )
                                      }
                                      // 添加数据
                                      list_two.push(data8)
                                      this.$axios.get('/api/data23', {

                                      }).then(res =>{
                                        let data9 = []
                                        if (res.data.code === 200) {
                                          for (let i = 0; i < res.data.result.length; i++) {
                                            data9.push(
                                                res.data.result[i].avg
                                            )
                                          }
                                          // 添加数据
                                          list_two.push(data9)
                                          this.init(data, list_two)
                                        }

                                      }).catch(error =>{
                                        error = "系统出错了"
                                        this.open4(error)
                                      })
                                    }

                                  }).catch(error =>{
                                    error = "系统出错了"
                                    this.open4(error)
                                  })
                                }

                              }).catch(error =>{
                                error = "系统出错了"
                                this.open4(error)
                              })
                            }

                          }).catch(error =>{
                            error = "系统出错了"
                            this.open4(error)
                          })
                        }

                      }).catch(error =>{
                        error = "系统出错了"
                        this.open4(error)
                      })
                    }

                  }).catch(error =>{
                    error = "系统出错了"
                    this.open4(error)
                  })
                }

              }).catch(error =>{
                error = "系统出错了"
                this.open4(error)
              })
            }

          }).catch(error =>{
            error = "系统出错了"
            this.open4(error)
          })
        }

      }).catch(error =>{
        error = "系统出错了"
        this.open4(error)
      })
    },
    init(data1, data2) {
      var chartDom = document.getElementById("main-vis-5");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        backgroundColor:"#fffdfd",
        title: {
          text: '球员占位趋势图',
          left: 'center',
          top: '6%',
          textStyle: {
            fontSize: 20,
            fontWeight: 'bold'
          },
          subtextStyle: {
            color: '#999',
            fontSize: 12
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          name: "球员",
          type: 'category',
          data: data1
        },
        series: [
          {
            name: '得分',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[0]
          },
          {
            name: '篮板',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[1]
          },
          {
            name: '助攻',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[3]
          },
          {
            name: '抢断',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[4]
          },
          {
            name: '盖帽',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[5]
          },
          {
            name: '命中率',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[6]
          },
          {
            name: '三分命中数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[7]
          },
          {
            name: '三分命中率',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[8]
          },
          {
            name: '罚球命中率',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: data2[9]
          },
        ]
      };

      option && myChart.setOption(option);
    }
  }
}

</script>

<template>
  <div id="main-vis-5"></div>
</template>

<style scoped>
#main-vis-5 {
  height: 100%;
  width: 100%;
}
</style>